<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>优贷云 - 放款管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css">
    <style>
        .layui-layout-admin .layui-header {
            background: linear-gradient(120deg, #3498db, #2980b9) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .layui-logo {
            color: #fff !important;
            font-weight: 500;
            font-size: 18px;
        }

        .layui-nav {
            background: transparent !important;
        }

        .layui-side {
            background: #fff !important;
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05);
        }

        .layui-side .layui-nav {
            background: #fff !important;
        }

        .layui-nav-tree .layui-nav-item a {
            color: #666 !important;
        }

        .layui-nav-tree .layui-this>a {
            background: linear-gradient(120deg, #3498db, #2980b9) !important;
            color: #fff !important;
        }

        .layui-card {
            margin: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        /* 状态标签样式 */
        .status-tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }

        .status-1 {
            background: #67C23A20;
            color: #67C23A;
        }

        .status-3 {
            background: #409EFF20;
            color: #409EFF;
        }

        .status-4 {
            background: #67C23A20;
            color: #67C23A;
        }

        .status-5 {
            background: #F56C6C20;
            color: #F56C6C;
        }

        /* 搜索框样式 */
        .table-search-box {
            padding: 15px;
            background: #fff;
            border-radius: 4px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <div class="layui-header">
            <div class="layui-logo">优贷云</div>
            {% include "back/templates/admin/common/header-user.html" %}
        </div>

        <!-- 左侧导航栏 -->
        {% include "back/templates/admin/common/menu.html" %}

        <!-- 内容主体区域 -->
        <div class="layui-body">
            <div class="layui-card">
                <!-- 搜索区域 -->
                <div class="table-search-box">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">订单编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="loan_order_number" placeholder="请输入订单编号" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">放款状态</label>
                                <div class="layui-input-inline">
                                    <select name="status">
                                        <option value="">全部</option>
                                        <option value="3">已放款</option>
                                        <option value="5">已逾期</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" lay-submit lay-filter="searchForm">搜索</button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="layui-card-body">
                    <!-- 数据表格 -->
                    <table id="loanTable" lay-filter="loanTable"></table>
                </div>
            </div>
        </div>

        <!-- 底部固定区域 -->
        <div class="layui-footer">
            © 2024 优贷云管理系统
        </div>
    </div>

    <!-- 行工具栏模板 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="loan">信息</a>
    </script>

    <!-- 放款方式模板 -->
    <script type="text/html" id="loanMethodTpl">
        {% if d.loan_method == 0 %}
            <span>支付宝</span>
        {% elif d.loan_method == 1 %}
            <span>微信</span>
        {% elif d.loan_method == 2 %}
            <span>银行卡</span>
        {% endif %}
    </script>

    <!-- 状态模板 -->
    <script type="text/html" id="statusTpl">
        <span class="status-tag status-{{d.status}}">
            {% if d.status == 1 %}
                待放款
            {% elif d.status == 3 %}
                已放款
            {% elif d.status == 4 %}
                已还款
            {% elif d.status == 5 %}
                已逾期
            {% endif %}
        </span>
    </script>

    <script src="/static/admin/layui/layui.js"></script>
    <script>
        layui.use(['element', 'table', 'form', 'layer'], function () {
            var element = layui.element
                , table = layui.table
                , $ = layui.$
                , form = layui.form
                , layer = layui.layer;

            // 表格实例
            table.render({
                elem: '#loanTable'
                , url: '/api/loan/loan_list/'
                , method: 'post'
                , toolbar: false
                , defaultToolbar: ['filter', 'exports', 'print']
                , cols: [[
                    { field: 'id', title: 'ID', width: 60, fixed: 'left', sort: true }
                    , { field: 'loan_order_number', title: '订单编号', width: 180 }
                    , { field: 'user_name', title: '借款人', width: 100 }
                    , { field: 'amount', title: '申请金额', width: 100 }
                    , { field: 'loan_amount', title: '放款金额', width: 100 }
                    , { field: 'description', title: '订单描述', width: 120 }
                    , { field: 'loan_method', title: '放款方式', width: 100 }
                    , { field: 'status', title: '状态', width: 90, }
                    , { field: 'loan_time', title: '放款时间', width: 160 }
                    , { field: 'repayment_time', title: '应还时间', width: 160 }
                    , { field: 'overdue_days', title: '逾期天数', width: 90 }
                    , { field: 'overdue_amount', title: '逾期金额', width: 100 }
                    , { field: 'create_time', title: '创建时间', width: 160 }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
                ]]
                , page: true
                , height: 'full-220'
                , parseData: function (res) {
                    if (res.code === 404) {
                        window.location.href = '/web/404/';
                        return;
                    }
                    let data = res.data || [];
                    data.forEach(item => {
                        // 计算逾期天数
                        if (item.repayment_time) {
                            const today = new Date();
                            const repaymentDate = new Date(item.repayment_time);
                            const createDate = new Date(item.create_time);

                            // 检查创建时间是否晚于还款时间
                            if (createDate > repaymentDate) {
                                item.overdue_status = '还款时间异常';
                                item.overdue_days = '--';
                                item.overdue_amount = '--';
                                item.overdue_time = '--';
                            } else {
                                // 检查是否已逾期
                                if (today > repaymentDate) {
                                    // 使用 UTC 时间戳来计算，避免时区问题
                                    const utcToday = Date.UTC(today.getFullYear(), today.getMonth(), today.getDate());
                                    const utcRepayment = Date.UTC(repaymentDate.getFullYear(), repaymentDate.getMonth(), repaymentDate.getDate());
                                    const diffTime = utcToday - utcRepayment;
                                    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                                    item.overdue_status = '已逾期';
                                    item.overdue_days = diffDays;
                                    // 设置逾期金额为放款金额
                                    item.overdue_amount = item.loan_amount;
                                    // 设置逾期时间为应还时间的第二天
                                    const overdueDate = new Date(repaymentDate);
                                    overdueDate.setDate(overdueDate.getDate() + 1);
                                    item.overdue_time = overdueDate.toISOString().split('T')[0] + ' 00:00:00';
                                } else {
                                    item.overdue_status = '正常';
                                    item.overdue_days = 0;
                                    item.overdue_amount = '--';
                                    item.overdue_time = '--';
                                }
                            }
                        } else {
                            item.overdue_status = '--';
                            item.overdue_days = '--';
                            item.overdue_amount = '--';
                            item.overdue_time = '--';
                        }

                        // 处理null值
                        item.loan_time = item.loan_time || '--';
                        item.id = item.id || '--';

                        // 格式化时间
                        if (item.create_time) {
                            item.create_time = item.create_time.replace('T', ' ').split('.')[0];
                        }
                        if (item.loan_time && item.loan_time !== '--') {
                            item.loan_time = item.loan_time.replace('T', ' ').split('.')[0];
                        }
                        if (item.repayment_time) {
                            item.repayment_time = item.repayment_time.replace('T', ' ').split('.')[0];
                        }
                        item.user_name = item.user_info.name;
                    });
                    return {
                        "code": res.code === 200 ? 0 : res.code, // layui 需要 0 表示成功
                        "msg": res.msg,
                        "count": res.count,
                        "data": data
                    }
                }
                , response: {
                    statusCode: 0
                }
            });

            // 监听行工具事件
            table.on('tool(loanTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'loan') {
                    // 构建详细信息HTML
                    var detailHtml = `
                        <div style="padding: 20px; line-height: 22px;">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-md6">
                                    <p><b>订单编号：</b>${data.loan_order_number}</p>
                                    <p><b>借款人：</b>${data.user_info.name}</p>
                                    <p><b>手机号：</b>${data.user_info.phone}</p>
                                    <p><b>用户编号：</b>${data.user_info.user_number}</p>
                                    <p><b>是否认证：</b>${data.user_info.user_is_authenticated ? '已认证' : '未认证'}</p>
                                    <p><b>默认额度：</b>${data.user_info.loan_default_amount}</p>
                                </div>
                                <div class="layui-col-md6">
                                    <p><b>申请金额：</b>${data.amount}</p>
                                    <p><b>放款金额：</b>${data.loan_amount}</p>
                                    <p><b>订单描述：</b>${data.description}</p>
                                    <p><b>放款方式：</b>${data.loan_method}</p>
                                    <p><b>订单状态：</b>${data.status}</p>
                                </div>
                            </div>
                            <div class="layui-row" style="margin-top: 15px;">
                                <div class="layui-col-md12">
                                    <p><b>创建时间：</b>${data.create_time}</p>
                                    <p><b>放款时间：</b>${data.loan_time || '--'}</p>
                                    <p><b>应还时间：</b>${data.repayment_time}</p>
                                    <p><b>逾期状态：</b>${data.overdue_status}</p>
                                    <p><b>逾期天数：</b>${data.overdue_days || '--'}</p>
                                    <p><b>逾期金额：</b>${data.overdue_amount || '--'}</p>
                                    <p><b>逾期时间：</b>${data.overdue_time || '--'}</p>
                                </div>
                            </div>
                        </div>
                    `;

                    // 打开详细信息弹窗
                    layer.open({
                        type: 1,
                        title: '订单详细信息',
                        area: ['600px', '500px'],
                        shadeClose: true,
                        content: detailHtml,
                        btn: ['关闭'],
                        yes: function (index) {
                            layer.close(index);
                        }
                    });
                }
            });

            // 搜索表单提交
            form.on('submit(searchForm)', function (data) {
                console.log(data.field);

                table.reload('loanTable', {
                    where: data.field
                });
                return false;
            });
        });
    </script>
</body>

</html>